<template>
	<view>
		<view class="bk-white pd-md">
			<view class="lay-c-c mg-b-md">
				<view class="flex1 pd-md bk-white-gray radius3 lay-c-c" style="height: 60rpx;">
					<input class="flex1" placeholder="请输入姓名查询" v-model="filterKeyword" />
				</view>
				<button class="btn mg-l-md" @click="onFilter">搜索</button>
			</view>

			<view class="pd-md bk-white-gray">
				<view class="lay-sb-c-c">
					<view class="">人数：{{signUpCount + '/' + personLimit}}</view>
					<button v-if="signUpStatus==1" class="btn bk-orange white" @click="closeSignUp">关闭报名</button>
					<button v-else class="btn bk-orange white" @click="openSignUp">开启报名</button>
				</view>

				<view class="mg-t-lg lay-sa-c-c">
					<button :class="filterType==1?'btn bk-blue white radius3':'btn bk-white dark-grey radius3'"
						style="border: 1rpx solid #808080;"
						@click="changeFilterType(1)">审核通过({{approvalCount}})</button>
					<button :class="filterType==0?'btn bk-blue white radius3':'btn bk-white dark-grey radius3'"
						style="border: 1rpx solid #808080;"
						@click="changeFilterType(0)">未审核({{unapprovalCount}})</button>
					<button :class="filterType==2?'btn bk-blue white radius3':'btn bk-white dark-grey radius3'"
						style="border: 1rpx solid #808080;" @click="changeFilterType(2)">审核失败({{rejectCount}})</button>
				</view>
			</view>
		</view>

		<view class="mg-t-md pd-md">
			<view class="red">温馨提示</view>
			<view class="grey">1、所有参赛选手必须在比赛前在线报名并完成审核</view>
			<view class="grey">2、只有通过审核的选手才有抽签资格，开始抽签前务必确认已审核人数</view>
		</view>

		<view class="bk-white pd-md">
			<view class="mg-t-lg lay-sb-c-c pd-md">
				<checkbox-group @change="onSelectAllChange">
					<label>
						<checkbox value="all" :checked="allChecked" />全选
					</label>
				</checkbox-group>
				<view class="hspace-md flex1"></view>
				<button class="btn bk-green white mg-h-md" @click="audit(1)">审核通过</button>
				<button class="btn bk-orange white mg-h-md" @click="audit(2)">审核失败</button>
			</view>

			<view class="vspace-lg"></view>

			<view class="mg-b-md pd-md" v-for="(player, index) in signUpPlayers" :key="index">
				<checkbox-group @change="onCheckChange(index)">
					<label class="lay-fs-c">
						<checkbox :checked="player.checked" />
						<view class="lay-fs-c">
							<view class="lay-c-c">
								<image style="width: 150rpx; height: 150rpx; border-radius: 16rpx; " :src="player.userAvatar">
								</image>
							</view>
							<view class="mg-l-md">
								<view class="mg-md">
									<text>呢称(id)：</text><text>{{player.userNickname+"("+player.userId+")"}}</text>
								</view>
								<view class="mg-md">
									<text>手机号：</text><text>{{player.userPhone}}</text>
								</view>
								<view class="mg-md">
									<text>审核状态：</text><text>{{player.auditState==0?"待审核":(player.auditState==1?"审核通过":"审核失败")}}</text>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		MyTip
	} from '@/components/ssty/common.js';
	import {
		getSignPlayers,
		changeRaceSignStatus,
		auditRacePlayers
	} from '@/api/fsh.js';
	const app = getApp();

	export default {
		data() {
			return {
				filterKeyword: '',
				filterType: 1,

				signUpStatus: 0,

				raceId: '',
				signUpPlayers: [],

				signUpCount: 0,
				personLimit: '',

				approvalCount: '',
				unapprovalCount: '',
				rejectCount: '',

				allChecked: false,
			}
		},
		onLoad(options) {
			this.raceId = options.raceId;

			if (!app.globalData.tempParam_for_raceManage || app.globalData.tempParam_for_raceManage.raceId != this
				.raceId) {
				MyTip("跨页面传参失败");
				uni.navigateBack();
				return;
			}
			this.personLimit = app.globalData.tempParam_for_raceManage.numOfPlayers;

			getSignPlayers(this.raceId).then(res => {
				this.onLoadSignPlayers(res);
			}).catch(err => {
				console.log("getSignPlayers fail, err=%o", err)
				MyTip(err.msg);
			})
		},
		methods: {
			onLoadSignPlayers(res) {
				this.signUpStatus = res.entity.signUpStatus;
				this.signUpPlayers = res.entity.signUpPlayers.map(a => {
					a.checked = false;
					return a;
				});
				this.signUpCount = this.signUpPlayers.length;

				this.approvalCount = 0;
				this.unapprovalCount = 0;
				this.rejectCount = 0;
				this.signUpPlayers.forEach(a => {
					switch (a.auditState) {
						case 1:
							++this.approvalCount;
							break;
						case 2:
							++this.rejectCount;
							break;
						default:
							++this.unapprovalCount;
							break;
					}
					if (!a.userPhone)
						a.userPhone = "";
				})

				this.original_signUpPlayers = JSON.parse(JSON.stringify(this.signUpPlayers));

				this.changeFilterType(1);

				console.log("onLoadSignPlayers", this);
			},

			onFilter() {
				if (this.filterKeyword) {
					this.signUpPlayers = this.signUpPlayers.filter(a => a.userNickname.indexOf(this.filterKeyword) >= 0);
				} else
					this.signUpPlayers = JSON.parse(JSON.stringify(this.original_signUpPlayers));
			},

			openSignUp() {
				changeRaceSignStatus(this.raceId, 0, 0, 1).then(res => {
					this.signUpStatus = 1;
				}).catch(err => {
					console.log("changeRaceSignStatus fail, err=%o", err)
					MyTip(err.msg);
				})
			},

			closeSignUp() {
				changeRaceSignStatus(this.raceId, 0, 1, 0).then(res => {
					this.signUpStatus = 0;
				}).catch(err => {
					console.log("changeRaceSignStatus fail, err=%o", err)
					MyTip(err.msg);
				})
			},

			changeFilterType(type) {
				this.filterType = type;
				this.signUpPlayers = JSON.parse(JSON.stringify(this.original_signUpPlayers));
				this.signUpPlayers = this.signUpPlayers.filter(a => a.auditState == type);
				if (this.filterKeyword) {
					this.signUpPlayers = this.signUpPlayers.filter(a => a.userNickname.indexOf(this.filterKeyword) >= 0);
				}
			},

			onSelectAllChange() {
				this.allChecked = !this.allChecked;
				this.signUpPlayers.forEach(a => a.checked = this.allChecked);
			},

			onCheckChange(index) {
				index = parseInt(index);
				this.signUpPlayers[index].checked = !this.signUpPlayers[index].checked;
			},

			audit(auditState) {
				var playerIds = '';
				this.signUpPlayers.filter(a => a.checked).forEach(a => {
					if (playerIds.length > 0)
						playerIds += ",";
					playerIds += a.playerId;
				});

				if (playerIds.length > 0) {
					auditRacePlayers(this.raceId, playerIds, auditState).then(res => {
						this.onLoadSignPlayers(res);
					}).catch(err => {
						console.log("changeRaceSignStatus fail, err=%o", err)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/leui.scss";

	page {
		height: 100%;
	}
</style>
